<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容过滤选择器</title>
    <!--    引入jquery-->
    <script src="../../js/jquery-3.3.1.js"></script>
</head>
<body>

<div>
    <h1 id="div_h1">你好，世界</h1>
    <h3 id="div_h3"></h3>
    <hr>
    <button id="div_btn">点击我试试</button>
</div>

<script>
    /**
     * 内容过滤检索，是对标签内容的过滤，类似于之前讲到的信息过滤
     */

    /**
     * 1.包含文本内容,校验是否包含该文本内容
     * 格式：jQuery( "xxx:contains(text)" )
     * xxx：伪选择器
     * 建议，伪选择器尽量精准匹配
     * 注意：返回值不是布尔类型，而是用来定位到满足条件的标签
     */
    let div_h1_contains = $('#div_h1:contains("世界")').text()
    console.log("div_h1_contains："+div_h1_contains)

    /**
     * 2.空值内容过滤器,就是用来过滤空的内容的
     * jQuery( "xxxx:empty" )
     * 注意：返回值不是布尔类型，而是用来定位到满足条件的标签
     * 需求：将空标签h3中添加一个默认值
     */
    $('#div_h3:empty').text('今天是12月18日')
    // $('#div_h3:empty').val('今天是12月18日')

    /**
     * 之前有同学问道过text和val的区别
     * text：文本数据
     * val：value属性（前提是该标签要有value属性，才可以设置，比如input标签）
     */

    /**
     * 现在先说个简单的事件处理
     * 在js中，点击事件的触发，也叫作点击函数的触发，用的是onclick属性
     * 比如点击某个标签，或者点击某个按钮，都是配置的onclick属性，由于同学们正在学习js，所有我就不多说这个
     * 在jquery中，也有相关的函数处理，则也是使用的类似的方法
     * 格式：$('xxxx').click(function (){})
     * btn：一般是对按钮的简写
     * 一般写函数事件，建议用分号结尾
     * 可以发现，在Jquery的大多数的操作，都是使用的选择器
     * 所以，选择器是很重要的，决定了你的所有效果以及触发的性能
     */
    $('#div_btn').click(function (){
        alert("你点击了我哦~")
    });

</script>
</body>
</html>